<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Aroma Shop - Cart</title>
	<link rel="icon"       th:href="@{/img/Fevicon.png}" type="image/png">
    <link rel="stylesheet" th:href="@{/vendors/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/fontawesome/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/themify-icons/themify-icons.css}">
    <link rel="stylesheet" th:href="@{/vendors/linericon/style.css}">
    <link rel="stylesheet" th:href="@{/vendors/owl-carousel/owl.theme.default.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/owl-carousel/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/nice-select/nice-select.css}">
    <link rel="stylesheet" th:href="@{/vendors/nouislider/nouislider.min.css}">
    <link rel="stylesheet" th:href="@{/css/elegant-icons.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/style-1.css}">
</head>
<body>
  <!--================ Start Header Menu Area =================-->
	<header class="header" th:replace="~{comm/common::header}"/>
	<!--================ End Header Menu Area =================-->

  <!--================Cart Area =================-->
  <section class="cart_area">
      <div class="container">
          <div class="cart_inner">
              <div class="table-responsive">
                  <table class="table">
                      <thead>
                          <tr>
                              <th scope="col">商品</th>
                              <th scope="col">价格</th>
                              <th scope="col">数量</th>
                              <th scope="col">总价</th>
                              <th scope="col">操作</th>
                          </tr>
                      </thead>
                      <tbody>
                      <th:block th:if="${cart!=null}" th:each="cartEntry,cur:${cart}">
                          <tr class="product-single">
                              <td>
                                  <div class="media">
                                      <div class="d-flex">
                                          <img th:src="${cartEntry.key.image}" alt="" width="100px" height="80px">
                                      </div>
                                      <div class="media-body">
                                          <p th:text="${cartEntry.key.name}"></p>
                                      </div>
                                  </div>
                              </td>
                              <td>
                                  <h5 class="c_price" th:text="${cartEntry.key.priceSell}">$360.00</h5>
                              </td>
                              <td class="product-qty">
                                  <input type="text" class="itemId" th:value="${cartEntry.key.id}" style="display: none">
                                  <div class="product_count">
                                      <input type="text" id="qty" name="qty" maxlength="6" th:value="${cartEntry.value}"
                                             title="Quantity:" class="input-text qty">
                                      <button class="increase items-count" id="increase" type="button"><i class="lnr lnr-chevron-up"></i></button>
                                      <button class="reduced items-count" id="reduce" type="button"><i class="lnr lnr-chevron-down"></i></button>
                                  </div>
                              </td>
                              <td class="tmp-total">
                                  <h5 class="c_total" th:text="${cartEntry.key.priceSell}">$720.00</h5>
                              </td>
                              <td>
                                  <div class="product-del">
                                      <button class="btn-danger" onclick="removeItem(this)">删除</button>
                                  </div>
                              </td>
                          </tr>
                      </th:block>
                          <tr class="product-subtotal">
                              <td>

                          <tr class="out_button_area">
                              <td class="d-none-l">

                              </td>
                              <td class="">

                              </td>
                              <td>

                              </td>
                              <td>
                                  <div class="checkout_btn_inner d-flex align-items-center">
                                      <a class="gray_btn" href="/shop/items">继续购物</a>
                                      <a class="primary-btn ml-2" href="/cart/checkout">前往结算</a>
                                  </div>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </section>
  <!--================End Cart Area =================-->



  <!--================ Start footer Area  =================-->	
	<footer class="footer" th:replace="~{comm/common::footer}"/>
	<!--================ End footer Area  =================-->



<!--  <script th:src="@{/vendors/jquery/jquery-3.2.1.min.js}"></script>-->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/vendors/bootstrap/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/vendors/skrollr.min.js}"></script>
    <script th:src="@{/vendors/owl-carousel/owl.carousel.min.js}"></script>
    <script th:src="@{/vendors/nice-select/jquery.nice-select.min.js}"></script>
    <script th:src="@{/js/jquery.slicknav.js}"></script>
    <script th:src="@{/js/jquery.nicescroll.min.js}"></script>
    <script th:src="@{/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/mixitup.min.js}"></script>
    <script th:src="@{/js/jquery.countdown.min.js}"></script>
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <script th:src="@{/vendors/jquery.ajaxchimp.min.js}"></script>
    <script th:src="@{/vendors/mail-script.js}"></script>
    <script th:src="@{/js/main-1.js}"></script>
    <script th:src="@{/js/handle/init-price.js}"></script>
  <script>
      $(document).ready(function(){
          let res = 0
          $.ajax({
              type:'get',
              url:"/cart/checkAmount",
              async:false,
              success:function(result){
                  console.log(result)
                  res = result
                  $('#cartNum').text(res)
              }});
      })
  </script>

</body>
</html>
